<template>
  <!--  <div style="width: 3508px; height: 2480px">-->
  <div class="app-container">
    <div id="printBox">
      <div
        style="margin-bottom: 20px"
        v-for="item in printData"
        :key="item?.id"
      >
        <div :id="`printId_${item?.id || ''}`">
          <table
            cellpadding="0"
            cellspacing="0"
            border="1"
            style="width: 100%; height: 100%; border-collapse: collapse"
          >
            <tr style="height: 1%">
              <td colspan="2" style="width: 16%; height: 8%">表单编号：</td>
              <td
                rowspan="2"
                style="
                  width: 14%;
                  text-align: center;
                  border: none;
                  border-top: 1px solid;
                  border-left: 1px solid;
                  border-bottom: 1px solid;
                "
              ></td>
              <td
                colspan="5"
                style="
                  text-align: center;
                  border: none;
                  border-top: 1px solid;
                  border-right: 1px solid;
                  font-weight: 900;
                  font-size: 15px;
                "
              >
                DKIA 供应商送货清单 （外协加工专用）
              </td>
            </tr>
            <tr style="height: 1%">
              <td colspan="2" style="width: 16%; height: 8%; font-weight: 700">
                DKIA-SCM-040
              </td>
              <td
                colspan="5"
                style="
                  text-align: center;
                  border: none;
                  border-bottom: 1px solid;
                  border-right: 1px solid;
                  font-weight: 900;
                  font-size: 13px;
                "
              >
                DKIA Supplier Advance Shipping Notice （Out Sourcing Process）
              </td>
            </tr>
            <tr>
              <td colspan="2">供应商名称：</td>
              <td colspan="4" style="text-align: center">
                {{ printData[0]?.supplierName }}
              </td>
              <td style="width: 16%">发货日期：</td>
              <td style="width: 16%; text-align: center">
                {{ printData[0]?.deliveryTime?.split(" ")[0] }}
              </td>
            </tr>
            <tr>
              <td colspan="2">联系人、电话：</td>
              <td colspan="4" style="text-align: center">
                {{ printData[0].driverName }}&nbsp;&nbsp;&nbsp;{{ printData[0].driverPhone }}
              </td>
              <td>预计到货日期：</td>
              <td style="text-align: center">
                {{ printData[0]?.expectedDeliveryDate?.split(" ")[0] }}
              </td>
            </tr>
            <tr>
              <td style="width: 6%; text-align: center">项目</td>
              <td style="width: 20%; text-align: center">产品图号</td>
              <td style="width: 13%; text-align: center" colspan="2">
                批次信息
              </td>
              <td style="width: 15%; text-align: center">箱数</td>
              <td style="width: 15%; text-align: center">数量</td>
              <td style="width: 12%; text-align: center">器具类型</td>
              <td style="width: 11%; text-align: center">器具数量</td>
            </tr>
            <tr v-for="(i, index) in item?.details" :key="index">
              <td style="width: 6%; text-align: center">{{ index + 1 }}</td>
              <td style="width: 20%; text-align: center; font-size: 15px">
                {{ i.figureNumber }}
              </td>
              <td style="width: 15%; text-align: center" colspan="2">
                {{ i.supplyBatch }}
              </td>
              <td style="width: 15%; text-align: center">
                {{ i.quantityUnit }}
              </td>
              <td
                style="width: 15%; text-align: center"
                v-if="
                  !isNaN(i.quantityUnit * i.materialQuantity) &&
                  i.quantityUnit * i.materialQuantity != 0
                "
              >
                {{ i.quantityUnit * i.materialQuantity }}
              </td>
              <td style="width: 15%; text-align: center" v-else></td>
              <td style="width: 12%; text-align: center">
                {{i.packingMaterialName}}
              </td>
              <td style="width: 11%; text-align: center">
                {{ i.quantityUnit }}
              </td>
            </tr>
            <tr>
              <td
                colspan="8"
                style="
                  border: none;
                  border-top: 1px solid;
                  border-left: 1px solid;
                  border-right: 1px solid;
                  font-size: 12px;
                  padding: 2px;
                "
              >
                接货时间：周一至周五 上午7：30-11：30；下午12：30-15：00
              </td>
            </tr>
            <tr>
              <td
                colspan="8"
                style="
                  border: none;
                  border-left: 1px solid;
                  border-right: 1px solid;
                  font-size: 12px;
                  padding: 2px;
                "
              >
                接货地：大连双D港董家沟铁山东路93号；邮编：116600；
              </td>
            </tr>
            <tr>
              <td
                colspan="8"
                style="
                  border: none;
                  border-left: 1px solid;
                  border-right: 1px solid;
                  border-bottom: 1px solid;
                  font-size: 12px;
                  padding: 2px;
                "
              >
                第一接货人：张延生（13610969963），第二接货人：宋宝存（13941172496）
              </td>
            </tr>
            <tr style="height: 5%">
              <td
                colspan="1"
                rowspan="3"
                style="
                  border: none;
                  border-top: 1px solid;
                  border-left: 1px solid;
                  border-bottom: 1px solid;
                  padding: 0;
                "
              >
                <img
                  style="width: 70px"
                  src="http://192.168.3.6:8030/assets/logo-icon-93e3e252.png"
                  alt="0"
                />
              </td>
              <td
                colspan="4"
                style="
                  border: none;
                  border-top: 1px solid;
                  font-size: 15px;
                  padding: 2px;
                  text-align: right;
                  font-weight: 700;
                "
              >
                | 冲压 | 拉延 | 机加工 | 焊接 | 表面处理 | 模具 | 零件研发 |
              </td>
              <td
                rowspan="3"
                style="text-align: center; border-left: 1px solid"
              >
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DKIA接货人
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;签字+时间
              </td>
              <td colspan="2" rowspan="3"></td>
            </tr>
            <tr>
              <td
                colspan="4"
                style="
                  border: none;
                  font-size: 15px;
                  padding: 2px;
                  text-align: right;
                  font-weight: 8700;
                  border-bottom: 1px solid;
                "
              >
                ISO9001/ ISO14001/ TS16949/ LRQA
              </td>
            </tr>
            <tr></tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import request from "@/utils/request";
import { useRoute } from "vue-router";
import { getLodop } from "@/utils/LodopFuncs";
import { RootObject } from "./index";
import JsBarcode from "jsbarcode";
import { useDictStoreHook } from "@/store/modules/dictionary";
import defaultSettings from "@/settings";
// 1、name每个页面不能重复，2、路由在router.ts中添加，3、添加至路由白名单（permission.ts中whiteList）
defineOptions({
  name: "IframePrintSrmDelivery",
  inheritAttrs: false,
});

// 打印模板全用div和span等原生html书写（确保打印格式不变）
// 样式全用行内style书写（确保样式生效）

const route = useRoute();

const useDictStore = useDictStoreHook();

// 打印数据，数组形式
const printData = ref<RootObject[]>([]);
const printDataone = ref<RootObject[]>([]);
const printDatatwo = ref<RootObject[]>([]);
const total = ref(0);
// 定义二维码options
let barOptions = {
  fontSize: 14,
  height: 50,
  fontOptions: "bold",
  textAlign: "center",
  margin: 0,
  width: 2,
  font: "Microsoft YaHei",
  displayValue: false, //是否在条形码下方显示文字
};

// 获取打印数据
async function getPrintData() {
  const { data } = await request({
    url: `/srm/srmexteriordelivery/getinfo/${route.query.id}`,
    method: "get",
    data: {},
  }).finally(() => {});
  //printData.value = [data, data, data]; //多张打印
  printData.value = data; //单张打印
  // printDatatwo.value = data.units;

  nextTick(() => {
    printData.value?.map(async (e) => {
      const qrCodeId = `barcode_${e?.id || ""}`;
      const qrCodeElement = document.getElementById(qrCodeId);

      if (qrCodeElement) {
        try {
          await QRCode.toCanvas(qrCodeElement, e.deliveryCode || "", {
            width: 100, // 可以根据需要调整二维码的大小
            margin: 1, // 可以根据需要调整二维码的边距
          });
        } catch (err) {
          console.error("Error generating QR code:", err);
        }
      }
    });
  });
  setTimeout(() => {
    let LODOP = getLodop();
    LODOP.PRINT_INIT(`包装打印-${route.query.id}`);
    // LODOP.SET_LICENSES(
    //   defaultSettings.printCompany,
    //   defaultSettings.printLicenses,
    //   "",
    //   ""
    // );
    printData.value?.map((e) => {
      console.log(e);
      printFun(e, LODOP);
    });
    // LODOP.PRINT(); // 打印
    LODOP.PREVIEW(); // 预览
    window.parent.postMessage("打印中，请稍后...", "*");
  }, 1000);
}

function printFun(pitem: RootObject, LODOP: any) {
  LODOP.SET_PRINT_PAGESIZE(2, "297mm", "210mm", "A4"); // 设置纸张类型（方向、宽度、高度、纸张类型名称）
  LODOP.SET_PRINT_STYLE("FontSize", 7.5);
  LODOP.SET_PRINT_STYLE("FontName", "cursive"); // 需要服务端机器安装同样字体，才能生效
  LODOP.ADD_PRINT_HTM(
    10, //top
    10, //left
    "268mm", //width
    "204mm", //height
    document.getElementById(`printId_${pitem?.id || ""}`)?.innerHTML
  );
  LODOP.ADD_PRINT_BARCODE(
    "17px", // tpp
    "305px", // left
    "35mm",
    "35mm",
    "QRCode",
    pitem?.deliveryCode || ""
  );
  //打印预览false纵向
  LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", true);
  // LODOP.ADD_PRINT_TEXT(450, 23, 98, 500, "委外加工出库单");
  LODOP.NEWPAGE(); //另起一页
}

onMounted(async () => {
  // 数据字典表获取
  await useDictStore.getDictionaryList();
  // 获取打印数据
  getPrintData();
});
</script>

<style lang="scss" scoped>
.app-container {
  //height: inherit;
  overflow: scroll;
  width: 1000px;
  height: 670px;
  //height: 595px;
  //width: 4904px;
  //height: 3558px;
  //table {
  //  border-collapse: collapse; /* 确保相邻边框合并 */
  //  width: 100%; /* 设置表格宽度 */
  //  height: 100%;
  //}
  td,
  th {
    border: 1px solid black; /* 设置边框样式：1px宽，实线，黑色 */
    padding: 5px; /* 设置单元格内边距 */
    text-align: left; /* 文本左对齐 */
    width: auto;
  }
}
</style>
